import React, {useState, useEffect} from 'react'
import {Table,Tooltip,Modal,Image} from 'antd'
import axios from 'axios' 

const {confirm} = Modal
export default function User() {

    const [dataSource, setDataSource] = useState([])
    useEffect(()=>{
        axios.get("/api/admin/get_all_user_info").then(res=>{
          console.log(res.data)
          setDataSource(res.data.result)
        })
      },[]) 

    const columns = [
        {
          title: '序号',
          dataIndex: 'id',
          key: 'id',
          render:(id)=>{
            return <b>{id}</b>
          }
        },
        {
          title: '用户名',
          dataIndex: 'user_name',
          key: 'user_name',
          render:(user_name)=>{
            return <b>{user_name}</b>
          }
        },
        {
          title: '人物头像',
          dataIndex: 'user_avatar',
          key: 'user_avatar',
          render:(user_avatar)=>{
            return(
                <Image style={{width:"50px",height:"50px"}} src={user_avatar}/>
            ) 
          }
        },
        {
          title: '用户电话号码',
          dataIndex: 'phone_number',
          key: 'phone_number',
          render:(phone_number)=>{
            return <b>{phone_number}</b>
          }
        },
        {
          title: '用户密码',
          dataIndex: 'password',
          key: 'password',
          ellipsis: {
            showTitle: false,
          },
          render: password => (
            <Tooltip placement="topLeft" title={password}>
              <b>{password}</b>
            </Tooltip>
          ),
        },
        {
          title: '用户性别',
          dataIndex: 'user_gendar',
          key: 'user_gendar',
          render:(user_gendar)=>{
            return <b>{user_gendar}</b>
          }
        },
        {
          title: '用户个性签名',
          dataIndex: 'user_signature',
          key: 'user_signature',
          ellipsis: {
            showTitle: false,
          },
          render: user_signature => (
            <Tooltip placement="topLeft" title={user_signature}>
              <b>{user_signature}</b>
            </Tooltip>
          ),
        },
    ]
    return (
        <div>
            <Table dataSource={dataSource} columns={columns}
              pagination={{
                pageSize:6}} 
              rowKey={item=>item.id}
            />
        </div>
    )
}